<template>
  <div>
    <div class="ke__margin ke__bgfff">
      <div class="ke__padding">
        <div class="ke__help block">
          您导出的文件生成后会暂存在服务器上，三天后会自动删除。

          <div class="refresh">
            <a href="javascript:;" @click="onClickRefresh">
              <i class="icon icon-refresh"></i>
              刷新
            </a>
          </div>
        </div>

        <div class="ke__padding">
          <el-table :data="items" v-loading="loading">
            <el-table-column label="文件名" prop="filename"/>

            <el-table-column label="类型" prop="moduleText" width="140px"/>

            <el-table-column label="格式" prop="file_type" width="140px"/>

            <el-table-column label="状态" prop="state" width="140px">
              <template slot-scope="{ row }">
                <span class="ke__table-state">{{ row.stateText }}</span>
              </template>
            </el-table-column>

            <el-table-column label="创建时间" prop="create_time" width="280px"/>

            <el-table-column label="操作" width="100px" align="center">
              <template slot-scope="{ row }">
                <el-button type="text" :disabled="row.state !== 1" @click="onClickDownload(row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'export',
  data () {
    return {
      loading: true,
      page: 1,
      items: [],
      total: 0
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    onClickRefresh () {
      this.page = 1
      this.getList()
    },
    getList () {
      this.loading = true
      this.$http.get('admin/export', {
        page: this.page
      })
        .finally(() => this.loading = false)
        .then(result => {
          if (result.res_code === 0) {
            this.items = result.list.map(item => {
              item.stateText = ['等待下载', '导出完成', '导出失败'][item.state]
              item.moduleText = {
                'user': '用户',
                'zhaopin_message': '求职名单',
                'student': '学员名单'
              }[item.module]
              return item
            })
            this.total = result.total
          }
        })
    },
    // 下载文件
    onClickDownload (row) {
      const a = document.createElement('a')
      a.href = row.download
      a.click()
    }
  }
};
</script>

<style scoped lang="scss">
  .refresh {
    position: absolute;
    right: 40px;
    bottom: 10px;
    .icon {
      font-size: 12px;
      margin-right: 5px;
    }
    a {
      text-decoration: none;
      color: #1e6abc;
    }
  }
</style>
